<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid #eee;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #eee;
        padding: 10px 16px;
        text-align: center;
      }
      th {
        background-color: #ccc;
        border-color: #aaa;
      }
      .count {
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <!-- jsx特点：多个标签最外层（根）只能有一个标签 -->
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script src="./format-utils.js"></script>

    <script type="text/babel">
      // 封装APP组件
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            books: [
              {
                id: 1,
                name: "《算法导论》",
                date: "2006-9",
                price: 85.0,
                count: 1,
              },
              {
                id: 2,
                name: "《UNIX编程艺术》",
                date: "2006-2",
                price: 59.0,
                count: 1,
              },
              {
                id: 3,
                name: "《编程珠玑》",
                date: "2008-10",
                price: 39.0,
                count: 1,
              },
              {
                id: 4,
                name: "《代码大全》",
                date: "2006-3",
                price: 128.0,
                count: 1,
              },
            ],
          };
        }

        renderBooks() {
          return (
            <div>
              <table>
                <thead>
                  <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.books.map((item, index) => (
                    <tr>
                      <td>{index + 1}</td>
                      <td>{item.name}</td>
                      <td>{item.date}</td>
                      <td>{formatPrice(item.price)}</td>
                      <td>
                        <button>-</button>
                        <span className="count">{item.count}</span>
                        <button>+</button>
                      </td>
                      <td>
                        <button onClick={(e) => this.removeBook(index)}>
                          移除
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <h2>总价:{this.getTotalPrice()}</h2>
            </div>
          );
        }
        renderEmptyTip() {
          return <h2>购物车为空</h2>
        }
        render() {

          return this.state.books.length ? this.renderBooks():this.renderEmptyTip()
        }
        removeBook(index) {
          // react 中 设计原则：state中数据不可变性
          console.log(index);
          this.setState({
            books: this.state.books.filter((item, indey) => index != indey),
          });
        }
        getTotalPrice() {
          // 1.for循环方式
          // let totalPrice = 0
          // for(let item of this.state.books) {
          //   totalPrice += item.price + item.count
          // }
          // return formatPrice(totalPrice)

          // 2.filter/map/reduce（归纳为）
          const totalPrice = this.state.books.reduce(
            (pre, item, index, arr) => {
              return pre + item.price * item.count;
            },
            0
          );
          return formatPrice(totalPrice);
        }
      }
      // 渲染组件
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
